<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">

	<title>活动详情</title>
	<link rel="stylesheet" href="../css/mui.min.css" />
	<link rel="stylesheet" href="../css/common.css" />
	<link rel="stylesheet" href="../iconfont/iconfont.css" />
	<link rel="stylesheet" href="../css/app.previewimage.css" />
	<style>
		.info-img img {
			width: 100%;
			max-height: 150px;
			margin-left: auto;
			margin-right: auto;
		}
		.info-info {
			padding-left: 15px;
		}
		.info-info i:before {
			font-size: 25px;
			line-height: 0px;
			color: #999;
		}
		.info-time {
			margin-bottom: 1px;
			margin-top: 5px;
		}
		.info-time button {
			padding: 2px 8px 0;
			border-color: #FC3A2E;
		}
		.info-menu .active {
			color: #FC3A2E;
			border-bottom: 2px solid #FC3A2E;
		}
		.thumbnail {
			padding-bottom: 10px;
			padding-right: 10px;
		}
		.thumbnail img {
			padding-left: 10px;
			padding-top: 10px;
			max-height: 120px;
			max-width: 100%;
		}
		.act-text {
			min-height: 70px;
		}
		.act-title,
		.act-desc,
		.act-text {
			padding-right: 15px;
		}
		.act-desc img,
		.act-text img {
			max-width: 100%;
			max-height: 100%;
		}
		.show-holder {
			min-height: 200px;
			display: none;
			border-top: 1px solid #DDDDDD;
		}
		.show-holder.active {
			display: block;
		}
		.show-image {
			padding: 10px;
			text-align: center;
			vertical-align: middle;
		}
		.show-image img {
			margin-top: 10px;
			max-width: 90%;
			max-height: 90%;
			min-height: 60px;
		}
		.op-row button {
			line-height: normal;
			padding: 2px 6px;
			font-size: 0.8em;
			color: #999999;
		}
		.op-row button>i {
			font-size: 12px !important;
		}
		.show {
			border-bottom: 1px solid #DDDDDD;
		}
		.show-thumb {
			padding: 5px;
		}
		.show-thumb img {
			width: 100%;
		}
	</style>
</head>
<body>
	<!--数据列表 开始-->
	<div class="mui-content mui-scroll-wrapper container-pull-refresh no-pad">
		<div class="mui-scroll">
			<!--数据列表-->
			<section class="mui-table-view scroll-data" data-tpl="tpl-template">
				<div class="mui-slider info-img white">
					<div class="mui-slider-group mui-slider-loop">
						<div class="mui-slider-item mui-text-center">
							<img src="../image/icon-no-image.png" data-preview-src="" data-preview-group="1" />
						</div>
					</div>
				</div>
				<div class="mui-row white info-info pad-v-sm bdr-b">
					<label class="act-title"></label>
					<i class="iconfont icon-fenxiang1 mui-pull-right mgn-h btn-share"></i>
				</div>
				<div class="mui-row white info-info text-gray pad-v-sm">
					<div class="mui-col-xs-12 act-desc"></div>
				</div>
				<div class="mui-row white info-info text-gray pad-v">
					<div class="mui-col-xs-12 act-text"></div>
				</div>
				<div class="mui-row white pad-v pad-h info-time white">
					<div class="mui-col-xs-12">
						<label>结束时间：</label>
						<time class="text-primary act-endat">2016-01-28 18:00</time>
						<button class="text-primary rds mui-pull-right btn-join-show">我要来绣</button>
					</div>
				</div>
				<!--菜单 开始-->
				<ul class="sroll-tab-menu no-bdr">
					<li class="active" data-target=".hot">最新</li>
					<li data-target=".lastest">最热</li>
					<li data-target=".list">列表</li>
					<li data-target=".thumb">缩略图</li>
				</ul>
				<!--菜单 结束-->
				
				<!-- 秀图内容 开始 -->
				<div class="show-holder white hot active" data-tpl="tpl-template" data-order='{"column":"create_time","type":"desc"}'></div>
				<div class="show-holder white lastest" data-tpl="tpl-template" data-order='{"column":"views","type":"desc"}'></div>
				<div class="show-holder white list" data-tpl="tpl-template" data-order='{"column":"create_time","type":"asc"}'></div>
				<div class="show-holder white thumb mui-row" data-tpl="tpl-images" data-images="images"></div>
				<!-- 秀图内容 结束 -->
			</section>
		</div>
	</div>
	<!--数据列表 结束-->
	
    <!-- 轮播图 模块开始 -->
	<script type="text/template" id="tpl-slider">
        <!--支持循环，需要重复图片节点-->
        <div class="mui-slider-item mui-slider-item-duplicate mui-text-center">
        	<img src="{{image(images[images.length - 1])}}" class="responsive" data-preview-src="" data-preview-group="1" />
        </div>
		{{each images as item}}
		<div class="mui-slider-item mui-text-center">
			<img src="{{image(item)}}" class="responsive" data-preview-src="" data-preview-group="1" />
		</div>
		{{/each}}
        <!--支持循环，需要重复图片节点-->
        <div class="mui-slider-item mui-text-center mui-slider-item-duplicate">
        	<img src="{{image(images[0])}}" class="responsive" data-preview-src="" data-preview-group="1" />
        </div>
	</script>
    <!-- 轮播图 模块结束 -->
    
	<!--活动模板 开始-->
	<script type="text/template" id="tpl-template">
		{{each data as item}}
		<div class="mui-row show" data-id="{{item.id}}">
			<div class="mui-col-xs-3 pad-h pad-v show-image">
				<img src="{{item.images.pop() | thumb}}" />
			</div>
			<div class="mui-col-xs-9 pad-h pad-v">
				<div class="show-title">
					{{item.content}}
				</div>
				<p class="show-text no-mgn pad-v">{{item.content}}</p>
				<div class="op-row">
					<span class="text-gray">{{item.create_time}}</span>
					<span class="mui-pull-right">
						<button type="button" class="mui-btn mui-btn-outlined mgn-h-sm btn-awesome">
							<i class="icon iconfont icon-down"> {{item.likes}}</i>
						</button>
						<button type="button" class="mui-btn mui-btn-outlined mgn-h-sm btn-comment">
							<i class="icon iconfont icon-pinglun"> {{item.comments}}</i>
						</button>
					</span>
				</div>
			</div>
		</div>
		{{/each}}
	</script>
	<!--活动模板 结束-->
	
	<!--图形展示模板 开始-->
	<script type="text/template" id="tpl-images">
		{{each data as item}}
		{{each item.images as picture}}
		<div class="mui-col-xs-3 show-thumb">
			<img src="{{picture | thumb}}" />
		</div>
		{{/each}}
		{{/each}}
	</script>
	<!--图形展示模板 结束-->
	
	<script type="text/javascript" src="../js/mui.min.js"></script>
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/jquery.ba-bbq.min.js"></script>
	<script type="text/javascript" src="../js/template.js"></script>
	<script type="text/javascript" src="../js/app.js"></script>
	<script type="text/javascript" src="../js/mui.zoom.js" ></script>
	<script type="text/javascript" src="../js/mui.previewimage.js" ></script>
	<script type="text/javascript" src="activity.detail.scroll.js" ></script>
</body>
</html>